﻿<Controls:UserControl x:Class="MyMediaStuff.UI.Controls.HomeView"
                      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                      xmlns:ViewModels="clr-namespace:MyMediaStuff.UI.ViewModels"
                      xmlns:Controls="clr-namespace:Catel.Windows.Controls;assembly=Catel.Windows"
                      xmlns:LocalControls="clr-namespace:MyMediaStuff.UI.Controls"
                      xmlns:s="clr-namespace:System;assembly=mscorlib"
                      x:TypeArguments="ViewModels:HomeViewModel">

    <Grid>        
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="350" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.ColumnSpan="2">
            <TextBlock Text="{Binding Title}" Style="{StaticResource CaptionTextBlockStyle}" />
        </Label>

        <Label Grid.Row="1" Content="{Binding MediaItems.Count}" ContentStringFormat="Found {0} media items" />

        <!-- Right panel -->
        <StackPanel Grid.Row="2" Grid.RowSpan="3" Grid.Column="1">
            <GroupBox Header="Toolbox">
                <!-- Preview size slider -->
                <Controls:StackGrid>
                    <Controls:StackGrid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Controls:StackGrid.ColumnDefinitions>

                    <Label Content="Preview size:" />
                    <Slider x:Name="previewSizeSlider" Minimum="150" Maximum="300" Value="190" IsSnapToTickEnabled="True"
                                TickFrequency="10" Width="200" />
                </Controls:StackGrid>
            </GroupBox>

            <GroupBox Header="Random picture">
                <Image Source="{Binding RandomPicture.FileName}" MaxWidth="225" MaxHeight="225"
                       HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" Margin="6" />
            </GroupBox>
            
            <LocalControls:NerdInfo />
        </StackPanel>

        <!-- List of latest pictures -->
        <GroupBox Grid.Row="2" Header="Latest pictures">
            <ListBox ItemsSource="{Binding LatestPictures}" SelectedItem="{Binding SelectedPicture, Mode=TwoWay}"
                ScrollViewer.HorizontalScrollBarVisibility="Disabled">

                <!-- Template definition required for the ExpressionDark theme -->
                <ListBox.Template>
                    <ControlTemplate TargetType="{x:Type ListBox}">
                        <Grid>
                            <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Background="{DynamicResource ControlBackgroundBrush}" />
                            <ScrollViewer Margin="1" Style="{DynamicResource NuclearScrollViewer}" Focusable="false" Background="{x:Null}">
                                <WrapPanel Orientation="Horizontal" Margin="1,1,1,1" IsItemsHost="true" />
                            </ScrollViewer>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border" />
                                <Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border" />
                            </Trigger>
                            <Trigger Property="IsGrouping" Value="true">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </ListBox.Template>

                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding FileName}" Width="{Binding ElementName=previewSizeSlider, Path=Value}" 
                               Height="{Binding ElementName=previewSizeSlider, Path=Value}" HorizontalAlignment="Center" 
                               VerticalAlignment="Center" Stretch="Uniform" Margin="6">
                            <Image.BitmapEffect>
                                <DropShadowBitmapEffect Color="Black" Direction="320" ShadowDepth="25" Softness="1" Opacity="0.5"/>
                            </Image.BitmapEffect>
                        </Image>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </GroupBox>

        <!-- List of latest videos -->
        <GroupBox Grid.Row="3" Header="Latest videos">
            <ListBox ItemsSource="{Binding LatestVideos}" SelectedItem="{Binding SelectedVideo, Mode=TwoWay}"
                ScrollViewer.HorizontalScrollBarVisibility="Disabled">

                <!-- Template definition required for the ExpressionDark theme -->
                <ListBox.Template>
                    <ControlTemplate TargetType="{x:Type ListBox}">
                        <Grid>
                            <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Background="{DynamicResource ControlBackgroundBrush}" />
                            <ScrollViewer Margin="1" Style="{DynamicResource NuclearScrollViewer}" Focusable="false" Background="{x:Null}">
                                <WrapPanel Orientation="Horizontal" Margin="1,1,1,1" IsItemsHost="true" />
                            </ScrollViewer>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border" />
                                <Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border" />
                            </Trigger>
                            <Trigger Property="IsGrouping" Value="true">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </ListBox.Template>

                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <MediaElement Source="{Binding FileName}" Width="{Binding ElementName=previewSizeSlider, Path=Value}" 
                                      Height="{Binding ElementName=previewSizeSlider, Path=Value}" HorizontalAlignment="Center"
                                      VerticalAlignment="Center" Stretch="Uniform" Margin="6" LoadedBehavior="Pause"
                                      Position="00:00:01" ScrubbingEnabled="True">
                            <MediaElement.BitmapEffect>
                                <DropShadowBitmapEffect Color="Black" Direction="320" ShadowDepth="25" Softness="1" Opacity="0.5"/>
                            </MediaElement.BitmapEffect>
                        </MediaElement>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </GroupBox>

        <!-- Preview -->
        <GroupBox Grid.Row="4" Header="Selected media item">
            <Grid>
                <Image Source="{Binding SelectedPicture.FileName}" HorizontalAlignment="Center" 
                       VerticalAlignment="Center" Stretch="Uniform" Margin="6" />

                <MediaElement Source="{Binding SelectedVideo.FileName}" HorizontalAlignment="Center" 
                              VerticalAlignment="Center" Stretch="Uniform" Margin="6" LoadedBehavior="Play" UnloadedBehavior="Close"/>
            </Grid>
        </GroupBox>
    </Grid>

</Controls:UserControl>
